<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加用户</title>
	<link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="../../css/dataTables.bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="../../layui/css/layui.css">
</head>
<body>
<div>
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		<header style="height: 100%">
			<div align="left">
				<table style="width: 100%">
					<tr>
						<td align="left">
							<button id="returnBt" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe603;</i>返回</button>
						</td>
						<td align="right">
							<button id="AddBt" class="layui-btn layui-btn-sm">
								<i class="layui-icon">&#xe608;</i> 添加
							</button>
						</td>
					</tr>
				</table>
			</div>
		</header>

		<div>
			<div class="widget-body no-padding">
				<table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
					<thead>
					<tr>
					</tr>
					<tr>
						<th>设备组id</th>
						<th>设备组名</th>
						<th>设备组备注</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
				<table id="dt-table-bottom" class="table table-striped table-bordered table-hover" style="width:100%">
					<thead>
					<tr>
					</tr>
					<tr>
						<th>组Id</th>
						<th>设备名</th>
						<th>设备备注名</th>
						<th>设备类型</th>
						<th>设备状态</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>


</body>
</html>

<script type="text/javascript" src="../../js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/my/permission.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/dict.js"></script>
<script type="text/javascript">
	layui.use([ 'layer' ], function() {
		var layer = layui.layer;
	});
	var userStatus = showDictSelect("status", "userStatus", true);

	var pers = checkPermission();
	var userid = getUrlParam("userid");
	var example;
	function init(){
		 example=$('#dt-table').DataTable({
					"searching": false,
					"processing": false,
					"serverSide" : true,
					"language": {
						"url": "/js/plugin/datatables/Chinese.lang"
					},
					"ajax": {
						"url" : "/appusers/grouplist",
						"type":"get",
						"data":function(d){
							d.groupname = $('#groupname').val();
							d.userid=userid;
						},
					},
					"dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",
					"columns": [
						{ "data": "id", "defaultContent": ""},
						{ "data": "groupname", "defaultContent": ""},
						{ "data": "groupbackname", "defaultContent": ""},
						{
							"data": "",
							"defaultContent": "",
							"orderable":false,
							"render": function (data, type, row) {
								var id = row['id'];
								var href = "updateGroup.html?id=" + id+"&userid="+userid;
								var edit = buttonEdit(href, "sys:user:add", pers);
								var device = $("<button class='layui-btn layui-btn-xs' title='关联设备' onclick='showdevices(\"" + id +"\")'><i class='layui-icon'>&#xe60f;</i></button>");

								var del = buttonDel(id, "no", pers);
								var adddevice = $("<button class='layui-btn layui-btn-xs' title='添加设备' onclick='addDevice(\"" + id +"\")'><i class='layui-icon'>&#xe654;</i></button>");
								return edit+ del+device.prop("outerHTML")+adddevice.prop("outerHTML");
							}
						},
					],
					"order": [[ 0, "desc" ],[1, "asc"]]
				} );
	}
	function del(id){
		layer.confirm('确定要删除吗？', {
			btn : [ '确定', '取消' ]
		}, function() {
			$.ajax({
				type : 'delete',
				url : '/appusers/grouplist/delete/'+id,
				success : function(data) {
					example.ajax.reload();
					layer.msg("删除成功");
				}
			});

			layer.close(1);
		});
	}

	function addDevice(id){
		var href = "addDevice.html?groupid=" + id+"&userid="+userid;;
		window.location=href;
	}

	function delDevice(id){
		layer.confirm('确定要删除吗？', {
			btn : [ '确定', '取消' ]
		}, function() {
			$.ajax({
				type : 'delete',
				url : '/appusers/devicelist/delete/'+id,
				success : function(data) {
					example2.ajax.reload();
					layer.msg("删除成功");
				}
			});

			layer.close(1);
		});
	}
	$("#AddBt").click(function(){
		var href = "addGroup.html?userid=" + userid;
		window.location=href;
	});
	$("#returnBt").click(function(){
		var href = "appUsers.html";
		window.location=href;
	});
	var example2;
	var dttable = $('#dt-table-bottom');
	function showdevices(id) {
		dttable.dataTable().fnClearTable(); //清空一下table
		dttable.dataTable().fnDestroy();

		example2=dttable.DataTable({
			"searching": false,
			"processing": false,
			"serverSide" : true,
			"language": {
				"url": "/js/plugin/datatables/Chinese.lang"
			},
			"ajax": {
				"url" : "/appusers/devicelist",
				"type":"get",
				"data":function(d){
					d.groupid=id;
				},
			},
			"dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",
			"columns": [
				{ "data": "groupid", "defaultContent": ""},
				{ "data": "devicename", "defaultContent": ""},
				{ "data": "devicebackname", "defaultContent": ""},
				{ "data": "deviceType", "defaultContent": ""},
				{ "data": "devicestatus", "defaultContent": ""},
				{
					"data": "",
					"defaultContent": "",
					"orderable":false,
					"render": function (data, type, row) {
						var id = row['id'];
						var href = "updateDevice.html?id=" + id+"&userid="+userid;
						var edit = buttonEdit(href, "sys:user:add", pers);
						var delbtn = $("<button class='layui-btn layui-btn-xs' title='删除' onclick='delDevice(\"" + id +"\")'><i class='layui-icon'>&#xe640;</i></button>");
						var del = delbtn.prop("outerHTML");
						return edit+ del;
					}
				},
			],
			"order": [[ 0, "desc" ],[1, "asc"]]
		} );
	}
	init();
</script>